<template>
<h1>消息提示按钮</h1>
  <el-button @click="f(1)">普通提示信息</el-button>
  <el-button @click="f(2)">警告提示信息</el-button>
  <el-button @click="f(3)">成功提示信息</el-button>
  <el-button @click="f(4)">错误提示信息</el-button>
  <el-button @click="f(5)">可取消的提示框</el-button>
</template>

<script setup>
import {ref} from "vue";
import {ElMessage} from "element-plus";

const f=(type)=>{
  switch(type){
    case 1:
      ElMessage("普通消息");
      break;
    case 2:
      ElMessage.warning("警告消息");
      break;
    case 3:
      ElMessage.success("成功消息");
      break;
      case 4:
      ElMessage.error("错误");
      break;
    case 5:
      ElMessage.error({
        message: '这是一条消息提示',
        showClose: true
      });
  }
}
</script>


<style scoped>

</style>